<template>
  <div :style="{ width, height }">
    <ul class="z-timeline">
      <template v-for="(value, field, index) in data">
        <time-line-item :key="index + 'header'" :header="field" />
        <time-line-item
          v-for="(item, _index) in value"
          :data="item"
          :key="index + '' + _index"
          :is-end="_index === value.length - 1"
          :direction="index % 2 === 0 ? 'right' : 'left'"
          :color="color"
        >
          <h2 style="margin-bottom: 5px" v-if="item[title]">
            {{ item[title] }}
          </h2>
          <p class="text-left inline" v-if="item[content]">
            {{ item[content] }}
          </p>
        </time-line-item>
      </template>
    </ul>
  </div>
</template>

<script>
import TimeLineItem from "./TimeLineItem.vue";
export default {
  components: {
    TimeLineItem
  },
  props: {
    height: String,
    width: String,
    color: {
      type: String,
      default: "#e28a2a"
    },
    data: {
      type: Object,
      required: true
    },
    title: {
      // title 字段，[{ header: '11-09' }]，title 应为 'header'
      type: String,
      default: "title"
    },
    content: {
      // 内容字段，意义同 title
      type: String,
      default: "content"
    }
  }
};
</script>

<style lang="scss">
.inline {
  display: inline-block;
}
.z-timeline {
  list-style: none;
  font-size: 14px;
  text-align: center;
  margin: 0;
}
.z-timeline-item {
  position: relative;
  padding: 0 0 20px;
  &:not(.z-timeline__end):before {
    content: "";
    position: absolute;
    top: 0.75em;
    left: 50%;
    margin-left: -2px;
    border: 2px solid #e8e8e8;
    height: 100%;
    width: 0;
  }

  &:after {
    content: "";
    margin-left: -5px;
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid;
    left: 50%;
    top: 0;
  }
  &.z-timeline-item__blue {
    color: #1890ff;
  }
  &.z-timeline-item__green {
    color: #52c41a;
  }

  .z-timeline-item-content {
    position: relative;
    color: #515a6e;
    line-height: 20px;
  }

  &.z-timeline-item__left .z-timeline-item-content {
    padding-left: 18px;
    text-align: left;
    left: 50%;
    width: 50%;
  }
  &.z-timeline-item__right .z-timeline-item-content {
    text-align: right;
    padding-right: 18px;
    width: 50%;
  }
}
.z-timeline-header {
  h2 {
    display: inline-block;
    margin-bottom: 20px;
    padding: 5px 10px;
    background: #717984;
    border-radius: 15px;
    color: #fff;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      border: 6px solid transparent;
      border-top-color: #717984;
      bottom: -12px;
      left: 50%;
      margin-left: -6px;
    }
  }
}
</style>
